﻿<div class="layui-card" id="lg-Reserve-FormList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>表单管理</div>
    <div class="layui-card-body" id="">
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnAdd"><i class="fa fa-file-excel-o fa-fw"></i>添加</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" v-on:click="Refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check">
                                序号
                            </th>
                            <th>表单名称</th>
                            <th>描述</th>
                            <th style="width:120px">添加日期</th>
                            <th style="width:120px">默认</th>
                            <th style="width:120px">状态</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(row,index) in table.data">
                            <td class="lg-table-check">
                                {{index+1}}
                            </td>
                            <td>{{row.Title}}</td>
                            <td>{{row.Intro}}</td>
                            <td>{{row.AddTime}}</td>
                            <td>
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsDefault==1}]" v-on:click="SetDefault(row)">
                                    <em>{{row.IsDefault==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsUsing==1}]" v-on:click="Check(row)">
                                    <em>{{row.IsUsing==1?'ON':'OFF'}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="OnEdit(row)" title="编辑"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" v-on:click="OnDelete(row)" title="删除"><span class="fa fa-trash-o fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="table.data.length==0||table.loading">
                    <p v-if="!table.loading">没有数据 ~</p>
                    <p v-if="table.loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-ReserveFormList" style="margin-top:-10px;"></div>
        </div>
    </div>
</div>
<script>
    var page = frame.createPage({
        mounted: function () {
            var page = this;
            page.vm = Vue.createApp({
                data() {
                    return {
                        table: {
                            data: [],
                            where: {
                                page: 1,
                                limit: 10
                            },
                            loading: false
                        }
                    }
                },
                mounted: function () {
                    this.GetForms();
                },
                methods: {
                    GetForms: function () {
                        this.table.loading=true;
                        this.table.data=[];
                        lg.request({
                            url: "/api/sys/reserve/getformlist",
                            data:this.where,
                            success: res => {
                                if (res.code == 0) {
                                    this.table.data = res.data || [];
                                    this.setPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.table.loading = false;
                            }
                        })
                    },
                    setPage: async function (count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-ReserveFormList'
                            , curr: that.table.where.page
                            , limit: that.table.where.limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function (obj, first) {
                                if (!first) {
                                    that.table.where.page = obj.curr;
                                    that.table.where.limit = obj.limit;
                                    that.GetPlans();
                                }
                            }
                        });
                    },
                    Refresh:function(){
                        this.table.where.page=1;
                        this.GetForms();
                    },
                    OnAdd:function(){
                        frame.NavigateTo({
                            url: "/lgm/reserve/form/add/",
                            title: "添加表单"
                        })
                    },
                    OnEdit:function(item){
                        frame.NavigateTo({
                            url: "/lgm/reserve/form/edit/"+item.Id,
                            title: "表单设置"
                        })
                    },
                    OnDelete:function(item){
                        var that=this;
                        layer.confirm("删除不可恢复，是否确认执行?",function(index){
                            layer.close(index);
                            lg.request({
                                url:"/api/sys/reserve/deleteForm",
                                data:{id:item.Id},
                                method:"post",
                                success:res=>{
                                    if(res.code==0){
                                        layer.msg("删除成功！",{icon:1});
                                        that.GetForms();
                                    }else{
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                }
                            })
                        })
                    },
                    Check:function(item){
                        var use = item.IsUsing == 1 ? 0 : 1;
                        lg.request({
                           url: "/api/sys/reserve/CheckForm",
                           method:"post",
                           data:{id:item.Id,IsUsing:use},
                           success:res=>{
                               if(res.code==0){
                                   item.IsUsing=use;
                               }else{
                                   layer.msg(res.msg,{icon:2})
                               }
                           }
                        })
                    },
                    SetDefault:function(item){
                        if(item.IsDefault!=1){
                            lg.request({
                                url: "/api/sys/reserve/SetFormDefault",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        this.GetForms();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        }else{
                            layer.msg("当前项已经是默认表单",{icon:2,anim:6})
                        }
                        
                    }
                }
            }).mount("#lg-Reserve-FormList")
        },
        methods:{
            reload:function(){
                this.vm.GetForms();
            }
        }
    }).mount();


</script>